<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddUIEchartsPie.component",
  components: {Maptalks},
  setup() {

    // ECharts"s chart creation
    const createChart = (dom) => {
      let myChart = echarts.init(dom);
      let option = {
        title: {
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          x: "center",
          y: "bottom",
          data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6", "rose7", "rose8"]
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: false, readOnly: false},
            magicType: {
              show: true,
              type: ["pie", "funnel"]
            },
            restore: {show: false},
            saveAsImage: {show: false}
          }
        },
        calculable: true,
        series: [
          {
            name: "Area mode",
            type: "pie",
            radius: [30, 110],
            center: ["50%", "50%"],
            roseType: "area",
            data: [
              {value: 10, name: "rose1"},
              {value: 5, name: "rose2"},
              {value: 15, name: "rose3"},
              {value: 25, name: "rose4"},
              {value: 20, name: "rose5"},
              {value: 35, name: "rose6"},
              {value: 30, name: "rose7"},
              {value: 40, name: "rose8"}
            ]
          }
        ]
      };
      myChart.setOption(option);
    }

    let mapOnLoadCB = (map) => {
      let chartDom = document.createElement("div");
      chartDom.style.cssText = "width:650px; height:300px;";
      createChart(chartDom);

      let echartsUI = new maptalks.ui.UIMarker(map.getCenter(), {
        "draggable": true,
        "content": chartDom
      }).addTo(map).show();


    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
